<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: block;
            height: 100px;
        }
    </style>
    <script>
        function doselect() {
            /**
             *  length属性：设置或返回下拉列表中选项的数量 
             */
            var select = document.getElementById('select')
            console.log(select.length);
            select.length = 0

            /**
             *  selectedIndex:设置或返回下拉列表中被选中项的索引 
             */
            console.log(select.selectedIndex);
            select.selectedIndex = 1

            /**
             *  value:返回下拉列表中被选中选项的值 
             */
            console.log(select.value);

            /**
             *  options:返回下拉列表中的所有选项，值为Option对象数组 
             */
            console.log(select.options[2]);
            select.options[2].value = '55'
            select.options[2].text = '傻逼'

            /**
             *  向下拉列表中添加选项 
             */
            var option = document.createElement('option')
            option.text = "小学"
            option.value = 'xx'
            select.appendChild(option, select[2])

            var option = new Option("小学", 'xx')
            select.add(option, select[1])//第二个参数表示添加在哪个元素前
        }
        function doSelect(e) {
            console.log(e.value);

        }

    </script>
</head>

<body>
    <button onclick="doselect()">点我试试</button><br>
    <span></span>
    <select id="select" onchange="doSelect(this)">
        <option value="0">请选择学历</option>
        <option value="cz">初中</option>
        <option value="gz">高中</option>
        <option value="zk">专科</option>
        <option value="bup">本科及以上</option>
    </select>
</body>

</html>